<!-- 角色管理 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title"></pageHeaderNew>
    </template>
    <div class="search-box">
      <div>
        <a-space>
          <a-input-search
            :style="{ width: '420px' }"
            placeholder="搜索"
            style="margin-bottom: 8px; max-width: 240px"
          />
        </a-space>
      </div>
      <div>
        <a-space>
          <a-button type="primary" @click="openMenuModal">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新增角色</template>
          </a-button>
        </a-space>
      </div>
    </div>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column :width="60" title="序号" fixed="left">
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="150" dataIndex="roleName" title="角色名称">
      </a-table-column>
      <a-table-column :width="150" dataIndex="roleName" title="上级角色名称">
        <template #cell="{ record }">{{
          record.parentRoleName || '--'
        }}</template>
      </a-table-column>
      <a-table-column :width="150" dataIndex="describe" title="最后活跃时间">
        <template #cell="{ record }">{{
          dayjs(record.updatedAt).format('YYYY-MM-DD')
        }}</template>
      </a-table-column>
      <a-table-column :width="150" title="操作">
        <template #cell="{ record }"
          ><a-space>
            <a-tooltip content="更多操作">
              <a-dropdown @select="handleSelect">
                <icon-font
                  type="icon-more-def"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
                <template #content>
                  <a-doption @click="emit(record)">修改角色</a-doption>
                  <a-doption @click="openRoleExclusiveModal(record)"
                    >角色互斥</a-doption
                  >
                  <a-doption @click="openPermissionModel(record)"
                    >配置菜单角色权限</a-doption
                  >
                  <a-doption @click="openObjPermissionModel(record)"
                    >配置对象角色权限</a-doption
                  >
                </template>
              </a-dropdown>
            </a-tooltip>
            <a-button
              type="text"
              status="danger"
              v-if="record.canItDelete === 1"
              @click="del(record)"
              >删除</a-button
            >
            <!-- <a-link @click="emit(record)">修改角色</a-link>
            <a-link
              v-if="record.canItDelete === 1"
              status="danger"
              @click="del(record)"
              >删除角色</a-link
            >
            <a-link @click="openRoleExclusiveModal(record)">角色互斥</a-link>
            <a-link @click="openPermissionModel(record)"
              >配置菜单角色权限</a-link
            >
            <a-link @click="openObjPermissionModel(record)"
              >配置对象角色权限</a-link
            > -->
          </a-space></template
        >
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <RoleModal
    v-model:visible="modelVisible"
    v-if="modelVisible"
    :editCompanyForm="editCompanyForm"
    @addRoleModel="addRoleModel"
  ></RoleModal>
  <RoleExclusive
    v-model:visible="RoleExclusiveVisible"
    v-if="RoleExclusiveVisible"
    :masterRoleId="masterRoleId"
    @addRoleExclusive="addRoleExclusive"
  ></RoleExclusive>
  <PermissionModel
    v-model:visible="PermissionModelVisible"
    v-if="PermissionModelVisible"
    :masterRoleId="masterRoleId"
    @setPermission="setPermission"
  ></PermissionModel>
  <ObjPermissionModel
    v-model:visible="ObjPermissionModelVisible"
    v-if="ObjPermissionModelVisible"
    :masterRoleId="masterRoleId"
    @setObjPermission="setObjPermission"
  ></ObjPermissionModel>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import PermissionModel from './components/PermissionModel.vue';
import ObjPermissionModel from './components/ObjPermissionModel.vue';
import RoleModal from './components/RoleModal.vue';
import RoleExclusive from './components/RoleExclusive.vue';
import {
  getRolePageList,
  postRoleList,
  getRoleParameterDuplicationCheck,
  putRoleList,
  postRoleExclusive,
  putRoleRel
} from '@/apis/roleManagement/index';
import dayjs from 'dayjs';

const title = '角色管理';
const modelVisible = ref(false);
const openMenuModal = () => {
  modelVisible.value = true;
};
const router = useRouter();
const ObjPermissionModelVisible = ref(false);
const RoleExclusiveVisible = ref(false);
const PermissionModelVisible = ref(false);
const editCompanyForm = ref<any>({});
const tableRef = ref();
const getTableData = async (page: any) => {
  try {
    const res = await getRolePageList({ ...page });
    return Promise.resolve(res);
  } catch (err: unknown) {
    console.log(err);
  }
};

// const del = async (id: number) => {
//   try {
//     const ids = [id];
//     await delMenu({ ids: ids.join() });
//     tableRef.value.loadData();
//   } catch (err: unknown) {
//     console.log(err);
//   }
// };

const emit = (record: any) => {
  editCompanyForm.value = record;
  modelVisible.value = true;
};

const addRoleModel = async (record: any, key: string) => {
  if (key === 'add') {
    try {
      const res = await getRoleParameterDuplicationCheck({
        parentRoleId: record.parentRoleId,
        roleName: record.roleName
      });
      await postRoleList({ ...record });
    } catch (err: unknown) {
      console.log(err);
    }
  } else {
    await putRoleList({ ...record });
  }
  tableRef.value.loadData();
};
const masterRoleId = ref();
const openRoleExclusiveModal = (record: any) => {
  RoleExclusiveVisible.value = true;
  masterRoleId.value = record.id;
};

const addRoleExclusive = async (res) => {
  await postRoleExclusive({
    masterRoleId: masterRoleId.value,
    mutuallyExclusiveRoleIds: res
  });
  tableRef.value.loadData();
};

const openPermissionModel = (record: any) => {
  masterRoleId.value = record.id;
  PermissionModelVisible.value = true;
};

const setPermission = async (res: any) => {
  try {
    await putRoleRel({ ...res });
    tableRef.value.loadData();
  } catch (err: unknown) {
    console.log(err);
  }
};

const openObjPermissionModel = (record) => {
  router.push({ name: 'ObjPermission', query: { roleId: record.id } });
};
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 96%;
  margin: 10px;
}
</style>
